<template>
  <p>{{ msg }}: {{ data.counter }}</p>
  <button @click="jian">This counter --</button>
</template>
<script setup>
import { reactive } from "vue"
defineProps({
  msg: {
    type: String,
    default: "counter"
  }
})
const data = reactive({
  counter: 0
})
const jian = () => {
  data.counter--
  console.log(data)
}

/*
* ref 声明值类型的数据 和 数组 xxx.value
* reactive 声明对象更好
* */

/*
const data = ref({
  counter: 0
})
const jian = () => {
  data.value.counter--
  console.log(data)
}*/
</script>

<style scoped>

</style>
